<template>
  <el-card class="card">
    <!-- 头部 -->
    <div class="index-head">
      <div class="index-head-title">主页</div>
      <el-row style="display: flex">
        <el-col>
          <div class="index-head-centent-left">
            <el-avatar
              style="margin-right: 10px"
              :size="56"
              :src="circleUrl"
            ></el-avatar>
            <div class="index-head-centent-left-text">
              <p>早上好,{{loginInfo.username}},祝你新的一天工作愉快</p>
              <p>今天小雨转阴天,21~27°,天凉,注意加衣</p>
            </div>
          </div>
        </el-col>

        <div class="monitor-cart-probability">
          <dv-water-level-pond
            :config="config"
            class="monitor-cart-probability-box"
          />
          <el-row class="center">
            <dv-border-box-1
              class="monitor-cart-probability-name"
              style="height: 30px; width: 200px"
              >阅读率</dv-border-box-1
            >
          </el-row>
        </div>
      </el-row>
      <el-row class="monitor-header-two" :gutter="20">
        <el-col :span="24">
          <div class="monitor-cart-name">
            <div class="monitor-cart-name-left">
              <i class="el-icon-document-remove"></i>
              图书借阅类目占比
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="monitor-visitors monitor-visitors-scale">
            <div class="monitor-visitors-left">
              <ve-ring :data="scaleData" :colors="colors"></ve-ring>
            </div>
            <div class="monitor-visitors-right">
              <div
                class="monitor-visitors-right-list"
                v-for="(item, index) in colors"
                :key="index"
              >
                <div class="monitor-visitors-right-list-name">
                  {{ scaleData.rows[index]["类目"] }}
                </div>
                <div class="monitor-visitors-right-list-number">
                  {{ scaleData.rows[index]["销量"] }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import {loginInfo} from "@/config"
export default {
  data() {
    return {
      loginInfo,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      config: {
        data: [66],
        shape: "roundRect",
      },
      colors: [
        "#F141AF",
        "#F85E1F",
        "#9830FA",
        "#0C99FD",
        "#25D9B4",
        "#1AA2FC",
      ],
      scaleData: {
        columns: ["类目", "销量"],
        rows: [
          { 类目: "HTML/HTML5基础", 销量: 1393 },
          { 类目: "高健壮性CSS", 销量: 3530 },
          { 类目: "深入学习JS", 销量: 2923 },
          { 类目: "JavaScript半知半解", 销量: 1723 },
          { 类目: "Web开发实战", 销量: 3792 },
          { 类目: "Vue入门", 销量: 4593 },
        ],
      },
    };
  },
};
</script>

<style scoped lang="less">
.monitor-cart-probability {
  /* background: cornflowerblue; */
  margin-top: -60px;
  width: 100%;
  height: 210px;
  padding: 20px 15px 0px;
  box-sizing: border-box;
}
.monitor-cart-probability-box {
  width: 100%;
  height: 80%;
  /* border: 1px solid #515A6E; */
  border-radius: 5px;
}
.center {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.monitor-cart-probability-name {
  width: 100%;
  height: 20%;
  text-align: center;
  line-height: 34px;
  /* background: chartreuse; */
  color: #515a6e;
  font-size: 14px;
  cursor: pointer;
}
.index-head {
  width: 100%;
  /* height: 133px; */
  padding: 16px 32px 0 32px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #dcdfe6;
}
.index-head-title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: #292929;
  margin-bottom: 16px;
}
.index-head-centent-left {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.index-head-centent-left-text {
  height: 56px;
}
.index-head-centent-left-text p:nth-child(1) {
  margin-bottom: 7px;
  font-size: 20px;
  color: #292929;
  letter-spacing: 0.1em;
}
.index-head-centent-left-text p:nth-child(2) {
  font-size: 12px;
  color: #999999;
  letter-spacing: 0.1em;
}
.index-head-centent-right {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.index-head-centent-right-list {
  height: 56px;
  cursor: pointer;
  margin-left: 20px;
}
.index-head-centent-right-list-icon {
  font-size: 14px;
  display: flex;
  margin-bottom: 5px;
  color: #808695;
}
.index-head-centent-right-list-icon-is {
  width: 14px;
  height: 14px;
  fill: currentColor;
  margin-right: 5px;
  padding: 5px;
  border-radius: 12px;
}

.index-head-centent-right-list-text {
  height: 28px;
  line-height: 28px;
  font-weight: bold;
  text-align: right;
  font-size: 20px;
}
.index-centent {
  width: 100%;
  min-height: 100%;
  padding: 25px;
  box-sizing: border-box;
}

.el-col {
  border-radius: 4px;
}
.monitor-header-two {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 20px;
}
.monitor-cart-name {
  width: 100%;
  height: 50px;
  /* background: yellow; */
  margin-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
}
.monitor-cart-name-left {
  width: 160px;
  height: 100%;
  /* background: blueviolet; */
  line-height: 42px;
  color: #5c5c5c;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.monitor-cart-name-left-icon {
  width: 30px;
  height: 30px;
  background: #f7eeff;
  border-radius: 2px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.monitor-cart-name-left-icon-s {
  width: 20px;
  height: 20px;
  color: blueviolet;
  fill: currentColor;
}
.monitor-cart-name-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.monitor-cart-name-right-list {
  width: 60px;
  height: 50px;
  /* background: chartreuse; */
  text-align: center;
  line-height: 50px;
  color: #515a6e;
  font-size: 14px;
  cursor: pointer;
}
.monitor-cart-name-right-list:hover {
  color: #2d8cf0;
}
.monitor-cart-box {
  /* background: chocolate; */
  width: 100%;
  height: 100px;
  padding: 10px 15px 0;
  box-sizing: border-box;
  /* border: 1px solid #E6E6E6; */
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 20px;
}
.monitor-cart-probability {
  /* background: cornflowerblue; */
  width: 100%;
  height: 210px;
  padding: 20px 15px 0px;
  box-sizing: border-box;
}
.monitor-cart-probability-box {
  width: 100%;
  height: 80%;
  /* border: 1px solid #515A6E; */
  border-radius: 5px;
}
.monitor-cart-probability-name {
  width: 100%;
  height: 20%;
  text-align: center;
  line-height: 34px;
  /* background: chartreuse; */
  color: #515a6e;
  font-size: 14px;
  cursor: pointer;
}
.monitor-visitors {
  width: 100%;
  height: 400px;
}
.monitor-visitors-scale {
  display: flex;
  justify-content: space-between;
}
.monitor-visitors-left {
  width: 60%;
  height: 100%;
}
.monitor-visitors-right {
  width: 40%;
  height: 100%;
  /* background: chocolate; */
  padding: 20px;
  box-sizing: border-box;
}
.monitor-visitors-right-list {
  width: 100%;
  height: 40px;
  /* background: cyan; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.monitor-visitors-right-list-icon {
  width: 15px;
  height: 15px;
  color: #666666;
  fill: currentColor;
}
.monitor-visitors-right-list-name {
  width: 120px;
  /* background: darkgoldenrod; */
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #595959;
  padding-left: 10px;
  box-sizing: border-box;
}
.monitor-visitors-right-list-number {
  flex: 1;
  /* background: yellowgreen; */
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #8c8c8c;
  padding-left: 10px;
  box-sizing: border-box;
  text-align: right;
  padding-right: 15px;
}
</style>